<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>document</title>
</head>

<body>
    <!-- 准备一个“容器” -->
    <div id="test"></div>

    <!-- 引入 react 核心库 -->
    <script src="../js/17.0.1/react.development.js"></script>
    <!-- 引入 react-dom. 用于支持 react 操作 dom -->
    <script src="../js/17.0.1/react-dom.development.js"></script>
    <!-- 引入babel. 用于将 jsx 转换为 js -->
    <script src="../js/17.0.1/babel.min.js"></script>
    <script type="text/babel"> /* 这里必须写 babel */

        /*
            经典面试题：
                1). react/vue 中的 key 有什么作用？（key 的内部原理是什么？）
                2). 为什么遍历列表时，ket 最好不要用 index?
                
                1. 虚拟 DOM 中 key 的作用：
                    1. 简单的说： key 是虚拟 DOM 对象的标识，在更新显示时 key 起着极其重要的作用
                    2. 详细的说： 当状态中的数据发生变化时，react 会根据【新数据】生成【新的虚拟DOM】
                        随后 React 进行 【新虚拟DOM】与【旧虚拟DOM】的 diff 比较，比较规则如下：
                            a. 旧虚拟DOM 中找到了与 新虚拟DOM 相同的 key:
                                (1). 若 虚拟DOM 中 内容没变，直接是哟个 之前的 真实DOM
                                (2). 若 虚拟DOM 中 内容变了，则生成新的 真实DOM 随后替换页面中之前的 真实DOM
                            b. 旧虚拟DOM 中未找到与 新虚拟DOM 相同的 key:
                                根据数据创建新的 真实DOM 随后渲染到页面
                
                2. 用 index 作为 key 可能会引发的问题
                    1. 若对数组进行：逆序添加、逆序删除 等破坏顺序操作：
                        会产生没有必要的 真实DOM 更新 ==> 界面效果没问题， 但效率第
                    2. 如果结构中还包含输入类的 DOM：
                        会产生错误 DOM更新 ==> 界面更新有问题
                    3. 注意！ 如果不存在对数据的 逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用 index 作为 key 是没有问题的

                3. 开发中如何选择 key?
                    1. 最好使用每条数据的唯一标识作为 key ，比如 id、手机号、身份证号、学号等唯一值
                    2. 如果确定只是简单的展示数据， 用 index 也是可以的

        */

        /*
            慢动作回放————使用 index 索引值作为 key
                初始数据：
                    {id:1,name:"小王",age:19},
                    {id:2,name:"大王",age:20},
                初始的虚拟 DOM：
                    <li key=0>小王————19<input type="text"/></li>
                    <li key=1>大王————20<input type="text"/></li>
                更新后的数据
                    {id:3,name:"小王",age:19},
                    {id:1,name:"小王",age:19},
                    {id:2,name:"大王",age:20},
                更新数据后的虚拟DOM
                    <li key=0>小王————19<input type="text"/></li>
                    <li key=1>小王————19<input type="text"/></li>
                    <li key=2>大王————20<input type="text"/></li>
            ——————————————————————————————————————————————————————————————————————————————————————
            慢动作回放————使用 id 唯一值 作为 key
                初始数据：
                    {id:1,name:"小王",age:19},
                    {id:2,name:"大王",age:20},
                初始的虚拟 DOM：
                    <li key=1>小王————19<input type="text"/></li>
                    <li key=2>大王————20<input type="text"/></li>
                更新后的数据
                    {id:3,name:"小王",age:19},
                    {id:1,name:"小王",age:19},
                    {id:2,name:"大王",age:20},
                更新数据后的虚拟DOM
                    <li key=3>小王————19<input type="text"/></li>
                    <li key=1>小王————19<input type="text"/></li>
                    <li key=2>大王————20<input type="text"/></li>

        */

        // 创建 DOM
        class Person extends React.Component {
            state = {
                students: [
                    { id: 1, name: "小王", age: 19 },
                    { id: 2, name: "大王", age: 20 },
                ]
            }
            // 点击添加
            add = () => {
                const { students } = this.state;
                const student = { id: students.length + 1, name: "小王", age: 19 }
                this.setState({ students: [student, ...students] })
            }
            render() {
                const { students } = this.state;
                return (
                    <div>
                        <h1>展示学生信息</h1>
                        <button onClick={this.add}>点击添加一个 小王 19 岁</button>
                        <h3>使用 index （索引值）作为 key</h3>
                        <ul>
                            {
                                students.map((item, index) => {
                                    return <li key={index}>{item.name}————item.age<input type="text"/></li>
                                })
                            }
                        </ul>
                        <hr/>
                        <hr/>
                        <hr/>
                        <h3>使用 id （唯一标识） 作为 key</h3>
                        <ul>
                            {
                                students.map((item, index) => {
                                    return <li key={item.id}>{item.name}————item.age<input type="text"/></li>
                                })
                            }
                        </ul>
                    </div>
                )
            }
        }
        // 渲染组件
        ReactDOM.render(<Person />, document.getElementById("test"))
    </script>
</body>

</html>